<template>
    <view class="bargain_container">
        <nav-bar ref="navBar" bgColor="themeBgColor" transparentFixedFontColor="#FFF" fontColor="#FFF" type="transparentFixed" title="我的砍价">
           <!-- <view slot="right" class="rule">砍价规则</view>
            <view slot="transparentFixedRight" class="rule">砍价规则</view> -->
        </nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
            <view class="bg_image_box" :style="{ paddingTop: statusBarHeight + 'px' }">
                <view class="title">
                    <image src="../../static/icon/theme/img_bargaining_title.png" mode="aspectFit"></image>
                </view>
                <view class="my_bargain" @click="onPageJump('/pages/bargain/myBargain')">我的砍价 ></view>
            </view>
            <view class="bargain_list_container">
                <view v-for="(item,index) of bargainList" :key="index">
                    <bargain-goods-many-item v-if="index !== 0 && (index + 1)%5 == 0 && bargainList[index + 1]" :list="[item, bargainList[index + 1]]" :index="index"></bargain-goods-many-item>
                    <bargain-goods-item v-else-if="!(index == 2 && (index)%5 == 0)" :item="item" :index="index"></bargain-goods-item>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    import bargainGoodsItem from './components/bargain_goods_item';
    import bargainGoodsManyItem from './components/bargain_goods_many_item';
    import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
    export default {
    	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
        components: {
            bargainGoodsItem,
            bargainGoodsManyItem
        },
        data() {
            return {
                statusBarHeight: 0,
                downOption: {
                	auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                bargainList: [],
            };
        },
        //第一次加载
        onLoad(e) {
            //获取手机状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                };
                this.$http
                	.post('api/mall/goods/v1/cut_list', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.bargainList = res.data;
                		} else {
                			this.bargainList = this.bargainList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        onPageScroll(e) {
            this.$refs.navBar.pageScroll(e);
        },
        //用户点击分享
        onShareAppMessage(e) {
            return this.wxShare();
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .bargain_container {
        background-color: #f2f2f2;
        min-height: 100vh;
    }

    .rule {
        font-size: 28rpx;
        color: #ffffff;
        padding-right: 30rpx;
    }

    .bg_image_box {
        width: 100%;
        @include bis("http://qn.kemean.cn/upload/202103/10/1615375649829hotxdwx0.png");
        background-position: center bottom;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-bottom: 380rpx;
        .title {
            padding-top: 112rpx;
            image {
                width: 451rpx;
                height: 64rpx;
            }
        }

        .my_bargain {
            width: 184rpx;
            height: 50rpx;
            line-height: 46rpx;
            border-radius: 28rpx;
            border: solid 1rpx #ffffff;
            color: #FFF;
            font-size: 28rpx;
            text-align: center;
            margin-top: 24rpx;
        }
    }
    .bargain_list_container {
        margin-top: -330rpx;
    }
</style>
